<link rel="stylesheet" href="../core/resource/components/swiper/swiper.min.css?v=3">
<style>
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{bottom:0.3rem}
.swiper-pagination-bullet {
    width: 0.2rem;
    height: 0.2rem;
    display: inline-block;
    border-radius: 0.2rem;
    background: #999;
    opacity: .2;
}
.swiper-pagination-bullet-active{background:{{main.syscolor||'#fff'}};width:0.6rem;opacity: 1;}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 0.05rem;
}
.bgbai .fui-icon-group,.bgnone .fui-icon-group {background: none}
.fui-icon-group .fui-icon-col .text {
    color: #666666;
}
.bgbai .swiper-pagination-bullet-active {
    background: #fff;
}
.bgbai .swiper-pagination-bullet {
    background: #fff;
}
.bgbai .fui-icon-group .fui-icon-col .text {
    color: #fff;
}
.coutag {padding:0.1rem 0.2rem;background:#ffedef;color:#db2e2a;font-size:0.55rem;border-radius: 0.2rem;}
</style>
<div class="swiper-container">
    <div class="swiper-wrapper" style="padding-bottom:0">
		<div class="swiper-slide">
			<div class="fui-icon-group noborder col-5">
				<div class="fui-icon-col" href="javascript:;" ng-click="pagedata.getlist('merch');pagedata.params.cid=0">
					<div class="icon"><img src="{{tomedia(pagedata.bankuai.img) || '../addons/jy_mfuwu/resource/images/icon01.png'}}"></div>
					<div ng-class="{'text':1,'active':pagedata.params.cid==0}">全部</div>
				</div>
				<div ng-if="$index<=3" class="fui-icon-col" ng-repeat="item in pagedata.allcates" href="javascript:;" ng-click="pagedata.getlist('merch');pagedata.params.cid=item.id">
					<div class="icon"><img src="{{tomedia(item.image) || '../addons/jy_mfuwu/resource/images/icon01.png'}}"></div>
					<div ng-class="{'text':1,'active':pagedata.params.cid==item.id}">{{item.catename}}</div>
				</div>
			</div>
		</div>
		<div ng-if="pagedata.allcates.length>4" class="swiper-slide">
			<div class="fui-icon-group noborder col-5">
				<div class="fui-icon-col" href="javascript:;" ng-click="pagedata.getlist('merch');pagedata.params.cid=0">
					<div class="icon"><img src="{{tomedia(pagedata.bankuai.img) || '../addons/jy_mfuwu/resource/images/icon01.png'}}"></div>
					<div ng-class="{'text':1,'active':pagedata.params.cid==0}">全部</div>
				</div>
				<div ng-if="$index>3 && $index<=8" class="fui-icon-col" ng-repeat="item in pagedata.allcates" href="javascript:;" ng-click="pagedata.getlist('merch');pagedata.params.cid=item.id">
					<div class="icon"><img src="{{tomedia(item.image) || '../addons/jy_mfuwu/resource/images/icon01.png'}}"></div>
					<div ng-class="{'text':1,'active':pagedata.params.cid==item.id}">{{item.catename}}</div>
				</div>
			</div>
		</div>
		<div ng-if="pagedata.allcates.length>9" class="swiper-slide">
			<div class="fui-icon-group noborder col-5">
				<div class="fui-icon-col" href="javascript:;" ng-click="pagedata.getlist('merch');pagedata.params.cid=0">
					<div class="icon"><img src="{{tomedia(pagedata.bankuai.img) || '../addons/jy_mfuwu/resource/images/icon01.png'}}"></div>
					<div ng-class="{'text':1,'active':pagedata.params.cid==0}">全部</div>
				</div>
				<div ng-if="$index>8 && $index<=13" class="fui-icon-col" ng-repeat="item in pagedata.allcates" href="javascript:;" ng-click="pagedata.getlist('merch');pagedata.params.cid=item.id">
					<div class="icon"><img src="{{tomedia(item.image) || '../addons/jy_mfuwu/resource/images/icon01.png'}}"></div>
					<div ng-class="{'text':1,'active':pagedata.params.cid==item.id}">{{item.catename}}</div>
				</div>
			</div>
		</div>
		<div ng-if="pagedata.allcates.length>14" class="swiper-slide">
			<div class="fui-icon-group noborder col-5">
				<div class="fui-icon-col" href="javascript:;" ng-click="pagedata.getlist('merch');pagedata.params.cid=0">
					<div class="icon"><img src="{{tomedia(pagedata.bankuai.img) || '../addons/jy_mfuwu/resource/images/icon01.png'}}"></div>
					<div ng-class="{'text':1,'active':pagedata.params.cid==0}">全部</div>
				</div>
				<div ng-if="$index>13 && $index<=18" class="fui-icon-col" ng-repeat="item in pagedata.allcates" href="javascript:;" ng-click="pagedata.getlist('merch');pagedata.params.cid=item.id">
					<div class="icon"><img src="{{tomedia(item.image) || '../addons/jy_mfuwu/resource/images/icon01.png'}}"></div>
					<div ng-class="{'text':1,'active':pagedata.params.cid==item.id}">{{item.catename}}</div>
				</div>
			</div>
		</div>
	</div>
	<div class="swiper-pagination" style="bottom:-0.3rem"></div>
</div>
 <script>
require(['swiper'], function (Swiper) {
		var swiper = new Swiper('.swiper-container', {
			pagination: {
				el: '.swiper-pagination',
			},
		});
});
</script>